import React, { useContext } from 'react';
import {
  Form,
  Input,
  Button,
  Grid,
  Select,
  Space,
} from '@arco-design/web-react';
import { IconRefresh, IconSearch } from '@arco-design/web-react/icon';
import styles from './style/index.module.less';
const { Row, Col } = Grid;
const { useForm } = Form;

function SearchForm(props: {
  onSearch: (values: Record<string, any>) => void;
  axisXs: any[];
  axisYs: any[];
  children?: React.ReactNode;
}) {
  const [form] = useForm();

  const handleSubmit = () => {
    const values = form.getFieldsValue();

    props.onSearch(values);
  };

  const handleReset = () => {
    form.resetFields();
    props.onSearch({});
  };

  return (
    <div className={styles['search-form-wrapper']}>
      <Form
        form={form}
        labelAlign="left"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
      >
        <Row gutter={24}>
          <Col span={8}>
            <Form.Item label="坐标" style={{ marginBottom: 0 }}>
              <Row gutter={24}>
                <Col span={11}>
                  <Form.Item field="x">
                    <Select
                      placeholder="X轴"
                      filterOption={(inputValue, option) => {
                        return option.props.children.includes(inputValue);
                      }}
                      showSearch
                      allowClear
                    >
                      {props.axisXs.map((e) => (
                        <Select.Option key={e.i} value={e.i}>
                          {e.n}
                        </Select.Option>
                      ))}
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={11}>
                  <Form.Item label="" field="y">
                    <Select
                      placeholder="Y轴"
                      filterOption={(inputValue, option) => {
                        return option.props.children.includes(inputValue);
                      }}
                      showSearch
                      allowClear
                    >
                      {props.axisYs.map((e) => (
                        <Select.Option key={e.i} value={e.i}>
                          {e.n}
                        </Select.Option>
                      ))}
                    </Select>
                  </Form.Item>
                </Col>
              </Row>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Space>
              <Button
                type="primary"
                icon={<IconSearch />}
                onClick={handleSubmit}
              >
                查找
              </Button>

              {props.children}
            </Space>
          </Col>
        </Row>
      </Form>
    </div>
  );
}

export default SearchForm;
